<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:replace="publicPart ::commonHead">
    <head th:if="${session.userInfo == null}">
        <meta charset="UTF-8">
        <title>个人信息</title>
        <link href="../static/bootstrap-4.6.1-dist/css/bootstrap.min.css"
              th:href="@{/bootstrap-4.6.1-dist/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
        <script src="../static/jQuery/jquery-3.6.0.min.js" th:src="@{/jQuery/jquery-3.6.0.min.js}"></script>
        <script src="../static/jQuery/jquery.cookie.js" th:src="@{/jQuery/jquery.cookie.js}"></script>
        <script src="../static/bootstrap-4.6.1-dist/js/bootstrap.bundle.js"
                th:src="@{/bootstrap-4.6.1-dist/js/bootstrap.bundle.js}"></script>
        <script type="text/javascript" src="../static/js/publicPart.js" th:src="@{/js/publicPart.js}"></script>
        <link href="../static/css/publicPart.css" rel="stylesheet" th:href="@{/css/publicPart.css}">
    </head>
    <link href="../static/css/login.css" rel="stylesheet" th:href="@{css/login.css}">
    <style>
        body, #main {
            margin: 0;
            padding: 0;
            background-image: url("https://cdn.acwing.com/static/web/img/background.png");
            background-repeat: repeat;
        }
    </style>
    <script>
        function validateusername() {
            let value = document.getElementById("user").value;
            let span1 = document.getElementById("tip");
            if (!value) {
                span1.innerHTML = "用户名不能为空";
                return false;
            } else if (value.length < 2 || value.length > 11) {
                span1.innerHTML = "用户名的长度2-12位";
                return false;
            } else {
                span1.innerHTML = "";
                return true;
            }

        }

        function validatepassword() {
            let value = document.getElementById("password").value;
            let span2 = document.getElementById("tip");
            if (!value) {
                span2.innerHTML = "密码不能为空";
                return false;
            } else if (value.length < 2 || value.length > 11) {
                span2.innerHTML = "密码的长度2-12位";
                return false;
            } else {
                span2.innerHTML = "";
                return true;
            }

        }

        function updatePwd() {
            let form = jQuery("#modelInputForm").serialize();
            form = form.replace(/&emailend=/, '')
            $.post("/demo/upDate/userPwd", form, function (rst) {
                if (rst == "success") {

                    window.location.reload()
                } else {
                    $("#modelMsg").removeClass("text-hide")
                    $("#modelMsg").text(rst)
                }
                // lastUserInfo = $("#form").serialize()

            })
        }
    </script>
</head>
<!--登录表单-->
<body>
<div>
    <div class="main">
        <div class="container rounded" style="max-width:400px;margin-top:200px;padding-top: 20px;border: solid 1px">
            <form id="form" action="/demo/login" method="post">
                <div class="container">
                    <div class="font-weight-bold" style="text-align: center;margin-bottom: 10px">
                        登录
                    </div>
                    <div class="form-group d-flex">
                        <label for="user" style="display:inline;"></label>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="用户名" id="user" name="loginName"
                                   autocomplete="off" onblur="validateusername()"/>
                        </div>
                        <!--                        <input type="text" name="loginName" class="form-control" id="user"-->
                        <!--                               style="display:inline;width:200px;" autocomplete="off" placeholder="用户名"-->
                        <!--                               onblur="validateusername();"/>-->
                        <!--                        <span style="color: red;" id="tip1"></span>-->
                        <!--                        <span style="color: red;" th:text="${msg}"></span>-->
                    </div>

                    <div class="form-group d-flex" style="margin-bottom: 0px;">
                        <label for="password" style="display:inline;"></label>
                        <div class="input-group mb-3">
                            <input type="password" class="form-control" placeholder="密码" id="password" name="loginPwd"
                                   autocomplete="off" onblur="validatepassword()"/>
                            <div class="input-group-append">
                            </div>
                        </div>
                        <!--                        <input type="password" name="loginPwd" class="form-control" id="password"-->
                        <!--                               style="display:inline;width:200px;" autocomplete="off" placeholder="密码"-->
                        <!--                               onblur="validatepassword();"/>-->
                        <!--                        <span style="color: red;" id="tip2"></span>-->
                    </div>
                    <div style="text-align: right">
                        <a href="#" style="font-size: x-small" data-toggle="modal" data-target="#myModal">忘记密码？</a>
                    </div>
                    <span id="tip" style="color: red;" th:text="${msg}"></span>
                    <center>
                        <button style="margin-top: 5px" type="button" class="btn btn-primary btn-lg1" id="btnLogin">登录
                        </button>
                    </center>
                    <div>
                        <a class="border-none" href="signUp" style="font-size:small">没有账号，立即注册</a>
                    </div>
                </div>
                <div style="margin-top: 10px"></div>
            </form>
        </div>
    </div>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header flex-column">
                    <!--                        <button class="btn border border-0 modal-title">验证密码</button>-->
                    <!--                        <button class="btn modal-title">验证邮箱</button>-->
                    <div class="d-flex w-100 h-75">
                        <ul class="list-inline mt-auto mb-auto mr-auto">
                            <li class="list-inline-item btn" id="selectEmailCheck">验证邮箱</li>
                        </ul>
                        <button type="button" class="close " data-dismiss="modal">&times;</button>
                    </div>
                    <div class="progress" id="progress"
                         style="margin-left:0px;height: 5px;width: 96px;transition: all 1s" settle="0">
                        <div class="progress-bar" style="width:100%"></div>
                    </div>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form id="modelInputForm">
                        <div>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control modelInput" placeholder="Email" id="userEmail"
                                       name="userEmail" onblur="validateemail();">
                                <div class="input-group-append">
                                    <!--                        <span class="input-group-text">@nhooo.com</span>-->
                                    <select class="input-group-append input-group-text" id="emailend" name="emailend">
                                        <option class="input-group-text" value="@qq.com" selected="selected">@qq.com
                                        </option>
                                        <option class="input-group-text" value="@163.com">@163.com</option>
                                        <option class="input-group-text" value="@189.com">@189.com</option>
                                    </select>
                                </div>
                            </div>
                            <div class="input-group mb-3" id="emailCheck">
                                <input type="text" class="modelInput form-control" placeholder="验证码" id="inputCode"
                                       name="inputCode">
                                <div class="input-group-append" style="width: 121px">
                                    <button type="button" class="input-group-text w-100" id="getEmail">获取验证码</button>
                                </div>
                            </div>

                        </div>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">输入新密码</span>
                            </div>
                            <input type="password" name="newPwd" id="newPwd" class="form-control modelInput">
                        </div>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">确认新密码</span>
                            </div>
                            <input type="password" id="ackPwd" class="form-control modelInput">
                        </div>

                    </form>
                    <div>
                        <code class="text-hide" id="modelMsg">密码错误</code>
                    </div>
                </div>


                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <a type="button" href="#" id="btnUpdatePwd" class="btn disabled">确认</a>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
<script>

    $("#btnLogin").click(function () {
        if (validateusername() && validatepassword()) {
            $("#btnLogin").attr("type", "submit")
        } else {
            $("#btnLogin").attr("type", "button")
        }
    })

    let disable = false
    let curCount
    $(function () {
        $(".modelInput").change(function () {
            modelInfoChange()
        })
        $("#btnUpdatePwd").click(function () {
            updatePwd()
        })
        $("#getEmail").click(function () {
            if (disable) return;
            // alert("ok")
            $.post("/demo/email", "userEmail=" + $("#userEmail").val() + $("#emailend").val(), function (rst) {
                // alert(rst)
                // 设置button效果，开始计时
            })
            document.getElementById("getEmail").setAttribute("disabled", "true");//设置按钮为禁用状态
            disable = true;
            curCount = 60
            document.getElementById("getEmail").innerText = curCount + "秒后重获";//更改按钮文字
            InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
        })
    })

    function SetRemainTime() {
        if (curCount == 0) {//超时重新获取验证码
            window.clearInterval(InterValObj);// 停止计时器
            document.getElementById("getEmail").removeAttribute("disabled");//移除禁用状态改为可用
            disable = false
            document.getElementById("getEmail").innerText = "重获验证码";
        } else {
            curCount--;
            document.getElementById("getEmail").innerText = curCount + "秒后重获";
        }
    }

    function isPwd(Pwd) {
        return Pwd.length >= 2 && Pwd.length <= 20
    }


    function modelInfoChange() {
        // alert("is ok")
        let PwdIsOk = false;
        let msg
        let newPwd = $("#newPwd").val()
        let ackPwd = $("#ackPwd").val()
        if ($("#inputCode").val() != null) {
            if (isPwd(newPwd)) {
                if (ackPwd == newPwd) {
                    PwdIsOk = true
                } else msg = "新密码不相同"
            } else msg = "新密码密码长度2~20"
        } else msg = "请输入验证码"
        if (PwdIsOk) {
            $("#btnUpdatePwd").removeClass("disabled")
            $("#btnUpdatePwd").addClass("btn-outline-info")
            $("#modelMsg").addClass("text-hide")
        } else {
            $("#btnUpdatePwd").addClass("disabled")
            $("#btnUpdatePwd").removeClass("btn-outline-info")

            $("#modelMsg").removeClass("text-hide")
            $("#modelMsg").text(msg)
        }
        $(this).value = ''
    }
</script>
</html>